<template>

  <view>
    <view class="header">
      <text>推荐</text>
    </view>
    <view class="nui-list">
      <view class="uni-flex uni-row">
        <view class="flex-item uni-bg-red">
          <navigator url="/pages/inquire/inquire" hover-class="navigator-hover">
            <image class="icon-item" src="../../static/asset/credit.png"></image>
            <view>个人学分</view>
          </navigator>

        </view>
        <view class="flex-item uni-bg-green">
          <navigator url="/pages/score/score" hover-class="navigator-hover">
            <image class="icon-item " src="../../static/asset/score.png"></image>
            <view>个人成绩</view>
          </navigator>
        </view>
        <view class="flex-item uni-bg-blue">
          <navigator url="/pages/PRate/PRate" hover-class="navigator-hover">
            <image class="icon-item" src="../../static/asset/PRate.png"></image>
            <view>电费查询</view>
          </navigator>
        </view>

        <view class="flex-item uni-bg-blue">
          <image class="icon-item" src="../../static/logo.png"></image>
          <view>南苑地图</view>
        </view>
      </view>
    </view>

  </view>

</template>

<script>
  import {
    intercept
  } from "@/utils/routerIntercept.js"
  export default {
    data() {
      return {

      }
    },
    beforeCreate() {
      uni.intercept();
    }
  }
</script>

<style>
  .header {
    background-color: #7e0000;
    width: 25%;
    height: 40px;
    border-radius: 0 15px 15px 0;
    display: flex;
    padding: 0 0 0 20px;
    margin: 5px 0;
    align-items: center;

  }

  .header>text {
    color: white;
  }



  .nui-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .uni-flex {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .uni-row {
    flex-direction: row;
  }

  .flex-item {
    height: 100px;
    width: 20%;
    text-align: center;
    margin: 5px auto;
    /* background-color: antiquewhite; */
    /* border: 2px solid black; */
    border-radius: 25px;
  }

  .icon-item {
    border-radius: 15px;
    border: 1px solid ghostwhite;
    height: 50px;
    width: 50px;
  }
</style>
